html, body {
    font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif !important;
}

#cardDetailsTitle,
#cardDetailsDescription,
#cardDetailsDescription > span {
    display: none;
}

.frm_required {
    color: #b94a48;
    font-weight: bold;
}

#backCardSetup a {
    background: none;
    padding-left: 15px;
}

#payByNuapay {
    display: none;
}

.body-content {
    margin: 0px 0px;
}

#index-title,
.container.body-container .body-head.body-head-index h4 {
    display: none;
}

#amount > div.form-group.amount.gbp.static.small {
    margin-top: 50px;
}

.navbar.navbar-default, .nav-container, .header-nav {
    background-color: #0b2d49;
}

.header-nav {
    border-color: #0b2d49;
    margin-bottom: 10px;
}

.header {
    background-color: #0b2d49;
    box-shadow: 0 50px 0 0 #ffffff;
    margin-bottom: 80px;
    box-sizing: border-box;
}

.imgLogo {
    max-height: 76px;
    margin: 0 auto;
}

.body-head .title {
    text-transform: capitalize;
    font-size: 30px;
    font-weight: bolder;
    color: #0b2d49;
    letter-spacing: 0.05em;
}

#cardDetailsDescription {
    margin-bottom: 5px;
}

.body-head .description {
    color: #0b2d49;
}

.body-content .form-group input {
    font-size: 18px;
    color: #0b2d49;
}

#confirm_desc_paragraph_text,
#confirm_content div.authcodeMessage,
.body-head .thanks {
    color: #0b2d49 !important;
}

.body-content .form-group.material input, .body-content .form-group.static input {
    border: 1px solid #b7c0c5 !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    font-size: 1.4rem !important;
    padding: 2rem 1rem !important;
    height: 50px !important;
}

.stepwizard.clearfix {
    display: none;
}

.body-content .form-group.material label, .body-content .form-group.material input.valid ~ label, .body-content .form-group.material input:focus ~ label, .body-content .form-group.material input.input-validation-error ~ label, .body-content .form-group.static label, .body-content .form-group.amount label, .body-content .form-group.amount input.valid ~ label, .body-content .form-group.amount input:focus ~ label, .body-content .form-group.amount input.input-validation-error ~ label {
    top: -29px;
}

.body-content .form-group.material input:focus ~ label, .body-content .form-group.static input:focus ~ label,
.body-content .form-group.material label, .body-content .form-group.material input.valid ~ label, .body-content .form-group.material input:focus ~ label, .body-content .form-group.material input.input-validation-error ~ label, .body-content .form-group.static label, .body-content .form-group.amount label, .body-content .form-group.amount input.valid ~ label, .body-content .form-group.amount input:focus ~ label, .body-content .form-group.amount input.input-validation-error ~ label {
    font-weight: normal !important;
    color: #0b2d49 !important;
    font-size: 15px;
    line-height: 1.37;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -moz-font-feature-settings: "liga" on;
    word-wrap: break-word;
    letter-spacing: 0.02em;
    transform: none;
    text-transform: none;
}

.body-content .small {
    width: 100% !important;
}

div .reference {
    margin-top: 40px;
}

.body-content .next.prev .btn.btn-primary {
    float: left;
}

#amount,
#verification {
    background-color: rgb(230, 234, 237);
    padding: 20px;
    border-radius: 1rem;
}

.form-control {
    display: block;
    width: 60%;
}

.body-content .back .btn.btn-primary,
.body-content .next .btn.btn-primary {
    background-color: #0b2d49 !important;
    background: url('/css/DCBL WEB Payment Page/images/arrow-right-white.png');
    font-size: 15px !important;
    background-repeat: no-repeat;
    text-transform: none;
    cursor: pointer;
    font-weight: normal !important;
    border-radius: 4px;
    letter-spacing: 0em !important;
    text-shadow: none;
    background-position: right 15px center;
}

.payment-buttons-option-color.active {
    background-color: #0b2d49;
}

.body-content .next .btn.btn-primary:hover {
    background-position: right 15px center !important;
    background-color: #04111c !important;
}

.order-confirmation .padding {
    padding: 30px 30px;
}

.order-confirmation .line .float-start, .order-confirmation .top .float-start {
    color: #0b2d49;
}

.order-confirmation .line .float-start, .order-confirmation .top .float-start {
    font-size: 16px;
}

.nuapay {
    padding: 30px;
    background-color: #0b2d49 !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

#totalAmountNuapay:before {
    color: #ffffff !important;
    font-size: 25px !important;
}

.order-confirmation .padding {
    padding: 30px 30px;
}

.form-container, .card, .order-confirmation {
    border: 2px solid #0b2d49;
    border-radius: 12px;
}

.order-confirmation {
    background: #ebf1f5;
    padding: 0;
}

#payDetails .float-end, #amountWs {
    font-weight: normal;
    font-size: 18px;
    color: black;
    letter-spacing: 0px;
}

#footer-text {
    width: 100%;
}

#footerCopyRights {
    background: white;
    padding: 0px;
}

#footerCopyRights p {
    text-align: center;
    color: #0b2d49;
    font-size: 16px;
}

#footerCopyRights {
    background: white;
    padding: 0px;
}

.footerProvider {
    display: none;
}

#footerCopyRights p a {
    color: red;
}

footer {
    background: none;
}

div.body-head.body-head-amountsetup p.description span,
span.question.tooltipFloatRight {
    display: none;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.body-content .form-group.amount.gbp:after, span.gbp:before {
    font-size: 18px;
    left: 45px;
    z-index: 1;
    color: #0c304e;
    top: 0px;
    margin-left: 0;
}

#AmountReferenceModel_0__Value {
    width: 200px;
    padding-left: 2rem !important;
}

.body-content .form-group.amount.gbp:after, span.gbp:before {
    left: 1rem !important;
    top: 6px;
    font-size: 15px;
    font-weight: normal;
}

.form-group.amount input {
    padding-left: 18px !important;
}

@media (min-width: 576px) {
    .body-content .form-group.material label {
        top: -29px;
    }
}

@media (max-width: 768px) {
    #amount, #verification {
        width: 100% !important;
    }
}